<template>
  <div>
    <div class="page-title" style="width:100%">任务列表</div>
    <div class="page-content">
      <el-row :gutter="10">
        <el-form label-width="87px" :inline="true" :model="filterQuery">
          <el-row>
          <el-form-item label="检查时间">
            <el-col :span="11">
              <el-date-picker
                type="date"
                placeholder="选择日期"
                format="yyyy 年 MM 月 dd 日"
                value-format="yyyy-MM-dd"
                v-model="filterQuery.startDate"
                style="width: 200px;"
              ></el-date-picker>
            </el-col>
            <el-col class="line" :span="2">-</el-col>
            <el-col :span="11">
              <el-date-picker
                v-model="filterQuery.endDate"
                type="date"
                placeholder="选择日期"
                format="yyyy 年 MM 月 dd 日"
                value-format="yyyy-MM-dd"
                style="width: 200px;"
              ></el-date-picker>
            </el-col>
          </el-form-item>
          <el-form-item label="任务状态" prop="category">
            <el-select v-model="filterQuery.status" placeholder="请选择任务状态" style="width:200px" clearable>
              <el-option
                v-for="item in statuss"
                :key="item.label"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="监督员">
            <el-select v-model="filterQuery.ExecStaffID" placeholder="选择监督员" filterable clearable style="width: 200px;">
              <el-option v-for="item in supervisors" :key="item.employeeID" :label="item.name" :value="item.employeeID"></el-option>
            </el-select>
          </el-form-item>
          </el-row>
          <el-row>
            <el-col :span="7">
            <el-form-item label="监督轮次">
            <el-input placeholder="输入轮次" v-model="filterQuery.round" style="width: 200px;"></el-input>
          </el-form-item>
          </el-col>
          <el-col :span="2">
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="handleClick">查询</el-button>
          </el-form-item>
          </el-col>
          </el-row>
        </el-form>
      </el-row>
    <!--/div-->
    <!--div class="page-list"-->
      <el-row style="padding:10px; border-top: 2px dashed #dddddd;text-align:center">
        <el-table
          :data="tableData"
          style="width: 100%"
          max-height="560"
          highlight-current-row
          border
          v-loading="loading"
        >
          <el-table-column prop="round" label="轮次" align="center"></el-table-column>
          <el-table-column label="执行周期" width="300" align="center">
            <template slot-scope="props">
              <div>{{ props.row.startDate}}~{{ props.row.endDate}}</div>
            </template>
          </el-table-column>

          <el-table-column prop="issueStaffName" label="下达人员" align="center"></el-table-column>
          <el-table-column prop="execStaffName" label="接收人员" align="center"></el-table-column>
          <el-table-column prop="execStatus" label="完成状态" align="center"></el-table-column>
          <el-table-column prop="status" label="接收状态" width="150" align="center"></el-table-column>
          <el-table-column prop="receiveDate" label="接收时间" align="center"></el-table-column>
          <el-table-column label="操作" width="300" align="center">
            <template slot-scope="scope">
              <router-link :to="{name: 'CQTaskManagementDetails', params: {taskRow: scope.row}}">
                <el-button type="primary" size="mini" class="detail">详情</el-button>
              </router-link>
              <router-link :to='{name: "CQTaskManagementIndex", params: {taskRow: scope.row,tip: 1}}' >
                <el-button  type="primary" size="mini" > 修改</el-button>
             </router-link>
              <el-button
                type="danger"
                size="mini"
                class="task_delete"
                v-if="scope.row.status != '审核'"
                @click="handleDeleteTaskCode(scope.row.supervisionTaskCode)"
              >删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="pagination-base">
          <el-pagination
            @current-change="handlePageChange"
            :current-page="filterQuery.pageIdx"
            :page-size="filterQuery.pageSize"
            :total="total"
            background
            layout="total, prev, pager, next, jumper"
          ></el-pagination>
        </div>
      </el-row>
    </div>
    <el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
      <span>此操作将永久删除该条记录, 是否继续?</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitDelet">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { 
  GetTaskManagement,
  DeleteTaskCode} from "../../../services/task_management";
import {GetSupervisor2} from '../../../services/cq_gettreedata'
//import { getDay } from "./time";
import Vue from "vue";
import VueCookies from "vue-cookies";
Vue.use(VueCookies);
export default {
  data() {
    return {
      tableData: [],
      loading: false,
      filterQuery: {
        startDate: "",
        endDate: "",
        status: "",
        ExecStaffID: "",
        round: "",
        pageIdx: 1,
        pageSize: 10,
      },
      dialogVisible: false,
      total: 0,
      statuss: [
        {
          label: "已接收",
          value: "已接收"
        },
        {
          label: "未接收",
          value: "未接收"
        }
      ],
      DeleteTaskCode: "",
      supervisors:[],
    };
  },
  mounted() {
    this.handleGetDate();
    this.loaddata(this.filterQuery);
    this.loadFilterParams();
    this.handleGetDate();
    this.getSupervisors();
  },
  methods: {
    getSupervisors(){
      GetSupervisor2().then((res) => {
        this.supervisors = res.data
      }).catch((err) => {
        this.$message.error(err.message)
      })
    },
    handleGetDate(){
			let showDate =new Date();
			let seperator ='-';
			let year = showDate.getFullYear();
			let month = showDate.getMonth() + 1;
      let month1=month-1
      let month2=month+2
      let year1=year
      let year2=year
			var strDate = showDate.getDate();
			if(month === 1){
				month1=month+11
        year1=year-1
        month2=month+2
        year2=year
      }
      if(month >10 && month <= 12){
        month2=month-10
        year2=year+1
      }
			if (month > 1 && month <= 12) {
					month = "0" + month;           
			}
			// if (strDate >= 0 && strDate <= 9) {
			// 		strDate = "0" + strDate;
      // }
     
			
			this.filterQuery.startDate = year1 + seperator + month1 + seperator + strDate;
			this.filterQuery.endDate= year2 + seperator + month2 + seperator + strDate;
			//this.dateRange=[ this.filterQuery.issueDate1, this.filterQuery.issueDate2]
  },
  formatDate (date) {
		var y = date.getFullYear();
		var m = date.getMonth() + 1;
		m = m < 10 ? '0' + m : m;
		var d = date.getDate();
		d = d < 10 ? ('0' + d) : d;
		return y + '-' + m + '-' + d;  
	}, 
    // 二次确认删除数据
    submitDelet() {
      this.dialogVisible = false;
      this.DeleteTask();
      this.loaddata(this.filterQuery);
    },
    // 网络请求删除数据
    DeleteTask() {
      let data = {
        supervisionTaskCode: this.DeleteTaskCode
      };
      //console.log(data)
      DeleteTaskCode(data)
        .then(() => {
          this.$message({
            message: "恭喜你，删除成功",
            type: "success"
          });
          this.loaddata(this.filterQuery)
          // console.log(res);
        })
        .catch(e => {
          console.log(e);
          this.$message.error("删除失败");
        });
    },
    handlePageChange(page) {
      this.filterQuery.pageIdx = page;
      this.loaddata(this.filterQuery);
    },
    loadFilterParams() {
      //从query读取过滤条件
      //this.filterQuery = {...filterQuery, ...this.$route.query}
      //从query中取到的参数是string的,要转成element要求的number
      this.filterQuery = {
        ...this.filterQuery,
        pageIdx: parseInt(this.filterQuery.pageIdx, 10),
        pageSize: parseInt(this.filterQuery.pageSize, 10)
      };
    },
    // 删除数据
    handleDeleteTaskCode(taskCode) {
      this.DeleteTaskCode = taskCode;
      this.dialogVisible = true;
    },
    // init() {
    //  this.filterQuery.startDate = getDay();
    //  this.filterQuery.endDate = getDay();
    // },
    handleClick() {
      // console.log("aaa", this.filterQuery);
      this.loaddata(this.filterQuery);
    },
    checkFilterParams() {
      //datepicker range 绑定的数据是数组,需要拆成后端识别的2个参数
      if (this.filterQuery.startDate && this.filterQuery.endDate) {
        this.filterQuery.startDate = `${this.filterQuery.startDate} 00:00:00`;
        this.filterQuery.endDate = `${this.filterQuery.endDate} 23:59:59`;
      } else {
        this.filterQuery.startDate = "";
        this.filterQuery.endDate = "";
      }
    },
    loaddata(filterQuery) {
      this.checkFilterParams();
      this.loading = true;
      GetTaskManagement(filterQuery)
        .then(res => {
          // console.log(JSON.stringify(this.filterQuery));
          this.tableData = res.data.list;
          this.total = res.data.total;
          this.filterQuery.pageIdx = res.data.page;
          this.loading = false;
        })
        .catch(err => {
          this.$message.error(err.message);
          this.loading = false;
        });
    }
  }
};
</script>

<style scoped>
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.search-label {
  display: flex;
}
.line {
  text-align: center;
}
.page-content {
  margin-top: 35px;
}
.task_delete {
  margin-left: 15px;
}
.detail{
  margin-right: 15px;
}
</style>